import React, { Component } from "react";
import { View, Text, TextInput, TouchableOpacity } from "react-native";
import NavBarConfig from "../modules/NavBar";
import Base64 from "../../util/base64";
import { BGT, MEMBER, BGT_CLEAR, REDEEM_CODE } from "../../config/Api";
import http from "../../util/http";
import { toast } from "../../util/tip";
import { getTimer } from "../../util/util";
import transferStyles from "../../style/pages/transferAndSettle";
import moneyStyles from "../../style/pages/getmoney";

class Settlement extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "結算",
        headerRight: []
      },
      navigation
    );
  state = {
    tel: "",
    type: 0,
    amount: 0,
    address: "",
    passwordInput: "",
    code: "",
    verifyMsg: "獲取驗證碼",

    inTransferRequesting: false
  };

  async getBgtInfo() {
    const data = await http.get(BGT);
    const member = await http.get(MEMBER);
    this.setState({
      amount: data.data.amount,
      tel: member.data.tel
    });
  }

  changeType(type = 0) {
    this.setState({
      type: type
    });
  }

  componentWillMount() {
    this.getBgtInfo();
  }

  handleChange(key, text) {
    let data = {};
    data[key] = text;
    this.setState({
      ...data
    });
  }

  async handleSendCode() {
    const value = this.state.tel;
    if (!value) {
      toast("手機號不能為空");
      return;
    }

    const data = await http.post(REDEEM_CODE, {
      tel: value
    });

    if (data) {
      getTimer(
        50,
        time => {
          this.setState({
            verifyMsg: `${time}s`
          });
        },
        () => {
          this.setState({
            verifyMsg: "獲取驗證碼"
          });
        }
      );
    }
  }

  async submitClear() {
    const address = this.state.address;
    const code = this.state.code.trim();
    const password = this.state.passwordInput.trim();

    if (this.state.type == 0 && !address) {
      toast("请输入钱包地址");
      return;
    }

    if (!code) {
      toast("请输入验证码");
      return;
    }

    if (!password) {
      toast("请输入密码");
      return;
    }

    let data = {
      code: code,
      password: Base64.encode(password)
    };

    if (this.state.type == 0) {
      data.address = address;
    }

    const ret = await http.post(BGT_CLEAR);
    console.log(ret);
    if (ret) {
      toast("提交结算成功");
      this.props.navigation.goBack();
    }
  }

  render() {
    return (
      <View>
        <View style={transferStyles.settlementTab}>
          <TouchableOpacity
            style={transferStyles.settlementItem}
            onPress={() => this.changeType(0)}
          >
            <Text
              style={[
                transferStyles.item,
                this.state.type == 0 ? transferStyles.itemActive : {}
              ]}
            >
              轉到額度
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={transferStyles.settlementItem}
            onPress={() => this.changeType(1)}
          >
            <Text
              style={[
                transferStyles.item,
                this.state.type == 1 ? transferStyles.itemActive : {}
              ]}
            >
              轉到BGT
            </Text>
          </TouchableOpacity>
        </View>
        <View style={moneyStyles.containItem}>
          <Text
            style={[
              moneyStyles.itemLeft,
              {
                flex: 1
              }
            ]}
          >
            BGT
          </Text>
          <Text style={moneyStyles.itemRight}>{this.state.amount}</Text>
        </View>
        {this.state.type == 0 ? (
          <View style={moneyStyles.containItem}>
            <TextInput
            underlineColorAndroid="transparent"
              style={moneyStyles.itemCenter}
              placeholder="请输入USDT钱包地址"
              onChangeText={text => this.changeValue("address", text)}
            />
          </View>
        ) : null}

        <View style={moneyStyles.containItem}>
          <TextInput
            underlineColorAndroid="transparent"
            type="text"
            style={moneyStyles.itemCenter}
            placeholder="請輸入短信驗證碼"
            maxLength={6}
            onChangeText={text => this.changeValue("code", text)}
          />
          <TouchableOpacity
            onPress={this.handleSendCode.bind(this)}
            style={[moneyStyles.getmoneyVerify, { top: 10, right: 10 }]}
            disabled={!this.state.tel || this.state.verifyMsg !== "獲取驗證碼"}
          >
            <Text style={moneyStyles.getmoneyVerify}>
              {this.state.verifyMsg}
            </Text>
          </TouchableOpacity>
        </View>
        <View style={moneyStyles.containItem}>
          <TextInput
            underlineColorAndroid="transparent"
            password={true}
            secureTextEntry={true}
            style={moneyStyles.itemCenter}
            placeholder="請輸入支付密碼"
            onChangeText={text => this.changeValue("password", text)}
            maxLength={6}
          />
        </View>

        <TouchableOpacity onPress={this.submitClear.bind(this)}>
          <Text style={transferStyles.settlementConfirm}>確定</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default Settlement;
